<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title>CoolClock Demo 2</title>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
        <!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
        <script src="../coolclock.js" type="text/javascript"></script>
        <script src="../moreskins.js" type="text/javascript"></script>

        <style type="text/css">
            body { background-color:#ddd; }
            .clock {
                float:left; display:block; margin:10px; padding:10px; background-color:#fff;
                -moz-box-shadow: 3px 3px 3px #999; -moz-border-radius:5px;
                -webkit-box-shadow: 3px 3px 3px #999; -webkit-border-radius:5px;
            }
        </style>

        <script type="text/javascript">
            $(function(){
                var shuffle = function(){ return 0.5 - Math.random(); };
                var clocks = [];
                for (var skin in CoolClock.config.skins) {
                    if (skin != 'chunkySwissOnBlack') {
                        clocks.push('<div class="clock"><canvas class="CoolClock:'+skin+'"                ></canvas></div>');
                        clocks.push('<div class="clock"><canvas class="CoolClock:'+skin+':::::logClock"   ></canvas></div>');
                        clocks.push('<div class="clock"><canvas class="CoolClock:'+skin+':::::logClockRev"></canvas></div>');
                    }
                }
                // shuffle three times for luck
                $('#demo').append(clocks.sort(shuffle).sort(shuffle).sort(shuffle).join('\n'));
                CoolClock.findAndCreateClocks();
            });
        </script>
    </head>
    <body><div id="demo"></div></body>
</html>

